<style>
</style>

<template>

  <div>
    <Row
      :gutter="10"
      class="margin-top-10"
    >
      <Col
        :md="12"
        :lg="9"
        :style="{marginBottom: '10px'}"
      >
      <Card>
        <p
          slot="title"
          class="card-title"
        >
          <Icon type="ionic"></Icon>
          基本数据
        </p>
        <div>
          <Row>
            <DepCount :DataSource="depCount"></DepCount>
          </Row>
        </div>
      </Card>
      </Col>
      <Col
        :md="12"
        :lg="15"
        :style="{marginBottom: '10px'}"
      >
      <Card>
        <p
          slot="title"
          class="card-title"
        >
          <Icon type="pie-graph"></Icon>
          隐患排查
        </p>
        <div>
          <Row>
            <Col span=12>
            <LineAlarm :LineDataSource="alarmTypeChart"></LineAlarm>
            </Col>
            <Col span=12>
            <Pie :PieDataSource="alarmStatChart"></Pie>
            </Col>

          </Row>
        </div>
      </Card>
      </Col>
    </Row>
    <Row
      :gutter="10"
      class="margin-top-10"
    >
      <Col
        :md="12"
        :lg="12"
        :style="{marginBottom: '10px'}"
      >
      <Card>
        <p
          slot="title"
          class="card-title"
        >
          <Icon type="shuffle"></Icon>
          全年告警走势
        </p>
        <div>
          <Row>
            <SmoothLine :LineDataSource="alarmFullYearChart"></SmoothLine>
          </Row>
        </div>
      </Card>
      </Col>
      <Col
        :md="12"
        :lg="12"
        :style="{marginBottom: '10px'}"
      >
      <Card>
        <p
          slot="title"
          class="card-title"
        >
          <Icon type="stats-bars"></Icon>
          安全隐患排行
        </p>
        <div>
          <Row>

            <BarChart :BarDataSource="alarmDepChart"></BarChart>
          </Row>
        </div>
      </Card>
      </Col>
    </Row>

  </div>

</template>

<script>
import { getAlarmChart } from "@/api/getData";
import LineAlarm from "./components/line.vue";
import SmoothLine from "./components/smoothLine.vue";
import Pie from "./components/pie.vue";
import BarChart from "./components/bar.vue";
import DepCount from "./components/depCount.vue";
export default {
  components: {
    BarChart,
    Pie,
    LineAlarm,
    SmoothLine,
    DepCount
  },
  data() {
    return {
      alarmStatChart: [
        { alarmStat: "未确认", count: 1 },
        { alarmStat: "已确认", count: 1 }
      ],
      alarmTypeChart: [
        { count: 0, alarmType: "火警" },
        { count: 0, alarmType: "故障" },
        { count: 0, alarmType: "预警" }
      ],
      alarmDepChart: [
        { pre_count: 0, depName: "城南", fire_count: 1, break_count: 2 },
        { pre_count: 0, depName: "江夏区", fire_count: 2, break_count: 0 }
      ],
      alarmFullYearChart: [],
      depCount: { areaCount: 0, gcCount: 0, bdCount: 0, devCount: 0 }
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let res = await getAlarmChart({});
      if (res.code == 0) {
        console.log(res);
        this.alarmStatChart = res.data.alarmStatChart;
        this.alarmTypeChart = res.data.alarmTypeChart;
        this.alarmDepChart = res.data.alarmDepChart;
        this.alarmFullYearChart = res.data.alarmFullYearChart;
        this.depCount = res.data.depCount;
      }
    }
  }
};
</script>
